import { Component, OnInit, Input, Output, EventEmitter, ElementRef } from '@angular/core';

@Component({
  selector: 'ngx-froala',
  templateUrl: './froala.component.html',
})
export class FroalaComponent implements OnInit {

  @Input() elementId: String;
  @Input() content: String;
  @Output() froala = new EventEmitter();

  option: Object;

  editor: any;

  constructor(private host: ElementRef) {

  }

  ngOnInit() {
    const that = this;
    this.option = {
      language: 'zh_cn',
      placeholderText: '请输入内容',
      charCounterCount: true,
      charCounterMax: 1000,
      toolbarButtons: ['align', 'insertLink', 'insertImage', 'insertHR', 'subscript', 'superscript'],
      codeMirror: false,
      codeMirrorOptions: {
        tabSize: 4,
      },
      heightMin: 100,
      heightMax: 500,
      imageUploadURL: 'api/v1/questions/uploadImage',
      imageUploadMethod: 'POST',
      events: {
        'froalaEditor.contentChanged': function (e, editor) {
          that.editor = editor;
          const content = editor.html.get();
          that.froala.emit(that.elementId + '=' + content);
        },
        'froalaEditor.initialized': function (e, editor) {
          that.editor = editor;
        },
      },
    };
  }
}
